import ChartTitle from '@/components/Visual/chartTitle';
import { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts/core';
import './index.less';
import type { MonthOrders } from '../types';
import { echartsResize } from '@/utils/echartsResize';
function OrderType(props: { monthOrders: MonthOrders | null }) {
  const chartRef: any = useRef(null); //拿到eCharts容器
  const [orderData] = useState([
    {
      name: '订单总数',
      value: 0,
    },
    {
      name: '免费订单',
      value: 0,
    },
    {
      name: '收费订单',
      value: 0,
    },
    {
      name: '会员订单',
      value: 0,
    },
    {
      name: '追缴订单',
      value: 0,
    },
  ]);
  const [activeIndex, setActiveIndex] = useState(0);
  const { monthOrders } = props;
  if (monthOrders) {
    orderData[0].value = 100;
    orderData[1].value = (monthOrders.free / (monthOrders.charge + monthOrders.free)) * 100 || 0;
    orderData[2].value = (monthOrders.charge / (monthOrders.charge + monthOrders.free)) * 100 || 0;
    orderData[3].value = (monthOrders.member / (monthOrders.charge + monthOrders.free)) * 100 || 0;
    orderData[4].value =
      (monthOrders.recovery / (monthOrders.charge + monthOrders.free)) * 100 || 0;
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: `${orderData[activeIndex].value.toFixed(2)}%`,
      subtext: orderData[activeIndex].name,
      left: 'center',
      top: '40%', //top待调整
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontFamily: 'DINAlternate-Bold',
      },
      subtextStyle: {
        color: '#ff',
        fontSize: 12,
        fontFamily: 'PingFangSC-Regular',
        top: 'center',
      },
      itemGap: 10, //主副标题间距
    },
    grid: {
      top: '5%',
      left: '5%',
      bottom: '5%',
      right: '5%',
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      // 内圆
      {
        type: 'pie',
        radius: ['0', '50%'],
        center: ['50%', '50%'],
        z: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#1147A1',
              },
              {
                offset: 0.5,
                color: '#423DB3',
              },
              {
                offset: 1,
                color: '#1147A1',
              },
            ]),
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        label: {
          normal: {
            position: 'center',
          },
        },
        data: [100],
      },
      // 进度圈
      {
        type: 'pie',
        clockWise: true,
        radius: ['60%', '55%'],
        data: [
          {
            value: orderData[activeIndex].value.toFixed(2),
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: '#7940FE' || '#00cefc', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#2A69EC' || '#367bec', // 100% 处的颜色
                    },
                  ],
                },
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: '#7940FE' || '#00cefc', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#2A69EC' || '#367bec', // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
          {
            name: '',
            value: (100 - orderData[activeIndex].value).toFixed(2),
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: 'gauge',
        radius: '67%',
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)',
          },
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: 'rgba(1,244,255, 0.9)',
          }, //刻度节点线
        },
        axisLabel: {
          color: 'rgba(255,255,255,0)',
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: '',
          },
        ],
      },
      // 刻度圈
      {
        type: 'pie',
        radius: ['0%', '73%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: 'bold',
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: 'rgba(32,36,107, 0.2)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(32,36,107,0.3)',
                },
                {
                  offset: 0.95,
                  color: 'rgba(32,36,107, 0.2)',
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
      //最外层圈
      {
        type: 'pie',
        radius: ['0%', '85%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          normal: {
            show: false,
            position: 'center',
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: 'bold',
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: 'rgba(21,24,65, 0.2)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(21,24,65, 0.3)',
                },
                {
                  offset: 0.95,
                  color: 'rgba(21,24,65, 0.2)',
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };

  const initChart = () => {
    const char = document.getElementById('orderType');
    if (char) {
      chartRef.current = echarts.init(char);
      chartRef.current.setOption(option as any);
      echartsResize(chartRef.current as any);
    }
  };

  useEffect(() => {
    initChart();
    const timer = setInterval(() => {
      setActiveIndex((prev) => {
        if (prev < orderData.length - 1) {
          return prev + 1;
        } else {
          return 0;
        }
      });
    }, 1000 * 5);
    return () => {
      clearInterval(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (chartRef.current) {
      chartRef.current.setOption(option as any);
      // console.log('重新执行一遍');
    }
  }, [option, props, activeIndex]);

  return (
    <div className="order_type">
      <div className="title">
        <ChartTitle title="订单类型" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div className="order_type_list">
        {/* <div className="show_order">{orderData[activeIndex].name}</div> */}
        <div id="orderType" className="chart" ref={chartRef} />
        <div className="list">
          {orderData.map((item) => (
            <div className="item" key={item.name}>
              <div className="Triangle" />
              <div className="right_name">
                <span>{item.name}</span>
                <div className="line" />
              </div>
              <div className="value">
                {item.value === 100 ? item.value + '%' : item.value.toFixed(2) + '%'}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default OrderType;
